<template>
  <div class="statistics-container">
    <!-- 概览卡片 -->
    <div class="overview-cards">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="overview-card">
            <div class="card-content">
              <div class="card-icon total-orders">
                <el-icon><List /></el-icon>
              </div>
              <div class="card-info">
                <div class="card-title">总订单数</div>
                <div class="card-value">{{ statistics.totalOrders }}</div>
                <div class="card-trend positive">
                  <el-icon><ArrowUp /></el-icon>
                  +12.5%
                </div>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card class="overview-card">
            <div class="card-content">
              <div class="card-icon total-revenue">
                <el-icon><Money /></el-icon>
              </div>
              <div class="card-info">
                <div class="card-title">总营业额</div>
                <div class="card-value">¥{{ statistics.totalRevenue.toLocaleString() }}</div>
                <div class="card-trend positive">
                  <el-icon><ArrowUp /></el-icon>
                  +8.3%
                </div>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card class="overview-card">
            <div class="card-content">
              <div class="card-icon total-users">
                <el-icon><User /></el-icon>
              </div>
              <div class="card-info">
                <div class="card-title">用户总数</div>
                <div class="card-value">{{ statistics.totalUsers }}</div>
                <div class="card-trend positive">
                  <el-icon><ArrowUp /></el-icon>
                  +15.2%
                </div>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card class="overview-card">
            <div class="card-content">
              <div class="card-icon avg-rating">
                <el-icon><Star /></el-icon>
              </div>
              <div class="card-info">
                <div class="card-title">平均评分</div>
                <div class="card-value">{{ statistics.avgRating }}</div>
                <div class="card-trend positive">
                  <el-icon><ArrowUp /></el-icon>
                  +0.2
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 图表区域 -->
    <div class="charts-section">
      <el-row :gutter="20">
        <!-- 订单趋势图 -->
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <span>订单趋势</span>
                <el-select v-model="orderTrendPeriod" size="small" style="width: 100px">
                  <el-option label="7天" value="7d" />
                  <el-option label="30天" value="30d" />
                  <el-option label="90天" value="90d" />
                </el-select>
              </div>
            </template>
            <div ref="orderTrendChart" class="chart-container"></div>
          </el-card>
        </el-col>

        <!-- 营业额趋势图 -->
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <span>营业额趋势</span>
                <el-select v-model="revenueTrendPeriod" size="small" style="width: 100px">
                  <el-option label="7天" value="7d" />
                  <el-option label="30天" value="30d" />
                  <el-option label="90天" value="90d" />
                </el-select>
              </div>
            </template>
            <div ref="revenueTrendChart" class="chart-container"></div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-top: 20px">
        <!-- 菜品销量排行 -->
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <span>热门菜品排行</span>
            </template>
            <div ref="dishRankingChart" class="chart-container"></div>
          </el-card>
        </el-col>

        <!-- 订单状态分布 -->
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <span>订单状态分布</span>
            </template>
            <div ref="orderStatusChart" class="chart-container"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 详细数据表格 -->
    <div class="data-tables">
      <el-row :gutter="20">
        <!-- 今日订单 -->
        <el-col :span="12">
          <el-card>
            <template #header>
              <span>今日订单</span>
            </template>
            <el-table :data="todayOrders" size="small" max-height="300">
              <el-table-column prop="orderNumber" label="订单号" width="120" />
              <el-table-column prop="customerName" label="客户" width="80" />
              <el-table-column prop="amount" label="金额" width="80">
                <template #default="scope">
                  ¥{{ scope.row.amount }}
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态" width="80">
                <template #default="scope">
                  <el-tag :type="getOrderStatusType(scope.row.status)" size="small">
                    {{ getOrderStatusText(scope.row.status) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="下单时间">
                <template #default="scope">
                  {{ formatTime(scope.row.createTime) }}
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>

        <!-- 热门菜品 -->
        <el-col :span="12">
          <el-card>
            <template #header>
              <span>热门菜品</span>
            </template>
            <el-table :data="popularDishes" size="small" max-height="300">
              <el-table-column prop="name" label="菜品名称" />
              <el-table-column prop="sales" label="销量" width="80" />
              <el-table-column prop="revenue" label="营收" width="100">
                <template #default="scope">
                  ¥{{ scope.row.revenue }}
                </template>
              </el-table-column>
              <el-table-column prop="rating" label="评分" width="80">
                <template #default="scope">
                  <el-rate v-model="scope.row.rating" disabled size="small" />
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import {
  List, Money, User, Star, ArrowUp,
} from '@element-plus/icons-vue'
import * as echarts from 'echarts'

// 响应式数据
const orderTrendPeriod = ref('7d')
const revenueTrendPeriod = ref('7d')

// 统计数据
const statistics = reactive({
  totalOrders: 1248,
  totalRevenue: 156780,
  totalUsers: 892,
  avgRating: 4.6
})

// 今日订单数据
const todayOrders = ref([
  {
    orderNumber: 'ORD20250527001',
    customerName: '张三',
    amount: 128,
    status: 3,
    createTime: '2025-05-27 12:30:00'
  },
  {
    orderNumber: 'ORD20250527002',
    customerName: '李四',
    amount: 89,
    status: 2,
    createTime: '2025-05-27 13:15:00'
  },
  {
    orderNumber: 'ORD20250527003',
    customerName: '王五',
    amount: 156,
    status: 4,
    createTime: '2025-05-27 14:20:00'
  },
  {
    orderNumber: 'ORD20250527004',
    customerName: '赵六',
    amount: 78,
    status: 1,
    createTime: '2025-05-27 15:45:00'
  }
])

// 热门菜品数据
const popularDishes = ref([
  { name: '回锅肉', sales: 156, revenue: 5928, rating: 4.8 },
  { name: '鱼香肉丝', sales: 134, revenue: 4288, rating: 4.6 },
  { name: '宫保鸡丁', sales: 128, revenue: 4608, rating: 4.7 },
  { name: '麻婆豆腐', sales: 98, revenue: 2940, rating: 4.5 },
  { name: '糖醋里脊', sales: 87, revenue: 3480, rating: 4.4 }
])

// 图表引用
const orderTrendChart = ref()
const revenueTrendChart = ref()
const dishRankingChart = ref()
const orderStatusChart = ref()

// 获取订单状态类型
const getOrderStatusType = (status: number) => {
  const types = ['info', 'warning', 'primary', 'success', 'danger']
  return types[status] || 'info'
}

// 获取订单状态文本
const getOrderStatusText = (status: number) => {
  const texts = ['待付款', '待接单', '制作中', '配送中', '已完成', '已取消']
  return texts[status] || '未知'
}

// 格式化时间
const formatTime = (time: string) => {
  return new Date(time).toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 初始化订单趋势图
const initOrderTrendChart = () => {
  const chart = echarts.init(orderTrendChart.value)
  const option = {
    title: {
      text: '订单趋势',
      textStyle: { fontSize: 14 }
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['05-21', '05-22', '05-23', '05-24', '05-25', '05-26', '05-27']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [45, 52, 38, 67, 73, 89, 94],
      type: 'line',
      smooth: true,
      itemStyle: {
        color: '#409EFF'
      }
    }]
  }
  chart.setOption(option)
}

// 初始化营业额趋势图
const initRevenueTrendChart = () => {
  const chart = echarts.init(revenueTrendChart.value)
  const option = {
    title: {
      text: '营业额趋势',
      textStyle: { fontSize: 14 }
    },
    tooltip: {
      trigger: 'axis',
      formatter: '{b}: ¥{c}'
    },
    xAxis: {
      type: 'category',
      data: ['05-21', '05-22', '05-23', '05-24', '05-25', '05-26', '05-27']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [3200, 4100, 2800, 5600, 6200, 7800, 8900],
      type: 'bar',
      itemStyle: {
        color: '#67C23A'
      }
    }]
  }
  chart.setOption(option)
}

// 初始化菜品排行图
const initDishRankingChart = () => {
  const chart = echarts.init(dishRankingChart.value)
  const option = {
    title: {
      text: '热门菜品销量',
      textStyle: { fontSize: 14 }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: ['糖醋里脊', '麻婆豆腐', '宫保鸡丁', '鱼香肉丝', '回锅肉']
    },
    series: [{
      data: [87, 98, 128, 134, 156],
      type: 'bar',
      itemStyle: {
        color: '#E6A23C'
      }
    }]
  }
  chart.setOption(option)
}

// 初始化订单状态分布图
const initOrderStatusChart = () => {
  const chart = echarts.init(orderStatusChart.value)
  const option = {
    title: {
      text: '订单状态分布',
      textStyle: { fontSize: 14 }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    series: [{
      name: '订单状态',
      type: 'pie',
      radius: '60%',
      data: [
        { value: 156, name: '已完成' },
        { value: 89, name: '制作中' },
        { value: 45, name: '待接单' },
        { value: 23, name: '配送中' },
        { value: 12, name: '待付款' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  }
  chart.setOption(option)
}

// 页面挂载后初始化图表
onMounted(() => {
  nextTick(() => {
    initOrderTrendChart()
    initRevenueTrendChart()
    initDishRankingChart()
    initOrderStatusChart()
  })
})
</script>

<style scoped>
.statistics-container {
  padding: 20px;
}

.overview-cards {
  margin-bottom: 20px;
}

.overview-card {
  height: 120px;
}

.card-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.card-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 24px;
  color: white;
}

.card-icon.total-orders {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.card-icon.total-revenue {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.card-icon.total-users {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.card-icon.avg-rating {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.card-info {
  flex: 1;
}

.card-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.card-trend {
  font-size: 12px;
  display: flex;
  align-items: center;
}

.card-trend.positive {
  color: #67c23a;
}

.card-trend.negative {
  color: #f56c6c;
}

.charts-section {
  margin-bottom: 20px;
}

.chart-card {
  min-height: 400px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  height: 320px;
  width: 100%;
}

.data-tables .el-card {
  height: 400px;
}

.data-tables .el-card :deep(.el-card__body) {
  padding: 20px;
  height: calc(100% - 60px);
  overflow: hidden;
}
</style>
